<template>
    <div class="pagination">
        <button @click="$emit('change-pageNo',pageNo-1)" :disabled="pageNo===1">上一页</button>
        <!-- 当起始页是1的时候，不应该显示之前的1，所以需要加一个判断 -->
        <button v-show="startAndEnd.start > 1" @click="$emit('change-pageNo',1)">1</button>
        <!-- 如果起始页是2的话，之前的1可以显示但是中间的...不应该显示出来 ，所以也需要加一个判断 -->
        <span v-show="startAndEnd.start >2">...</span>
        <button :class="{active:pageNo===startAndEnd.start + index}" v-for="(_,index) in (startAndEnd.end - startAndEnd.start + 1)" 
            @click="$emit('change-pageNo',startAndEnd.start + index)"
            :key="_">{{startAndEnd.start + index}}
        </button>
        <button v-show="startAndEnd.end < totalPage -1">···</button>
        <button v-show="startAndEnd.end < totalPage"  @click="$emit('change-pageNo',totalPage)">{{ totalPage }}</button>
        <button @click="$emit('change-pageNo',pageNo+1)" :disabled="pageNo===totalPage">下一页</button>

        <span>共 {{total}} 条</span>
    </div>
</template>

<script>
    export default {
        name:"Pagination",
        props:["total","pageNo","pageSize","continues"],
        computed:{
            // 1.计算总页码数
            totalPage(){
                const {total,pageSize} = this;
                return Math.ceil(total / pageSize);
            },
            // 2.计算起始结束页
            startAndEnd(){
                const {pageNo,continues,totalPage,pageSize} = this;
                let start,end
                if (continues > totalPage) {
                    // 如果连续页数 > 总页数 也就是总页数太少 设置的连续页码多了
                    //  那直接让 最后一页=总页码数 就行
                    start = 1;
                    end = totalPage;
                } else {
                    start = pageNo - parseInt(continues/2);
                    end = pageNo + parseInt(continues/2);
                    if (start < 1) {
                        // 如果起始页<1
                        start = 1;
                        end = continues;
                    }
                    if (end > totalPage) {
                        end = totalPage;
                        start = totalPage - continues + 1 // 起始页要从后往前算
                    }
                }
                return {start,end};
            },
            
        },
        // methods: {
        //     // 单击按钮 分页
        //     changePageNum(pageNum){
        //         this.$emit("get-pageNo",pageNum)
        //     }            
        // },
    };
</script>

<style lang="less" scoped>
.pagination.pagination {
  text-align: center;
  button {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    outline: none;
    border-radius: 2px;
    padding: 0 4px;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: 0;

    &[disabled] {
      color: #c0c4cc;
      cursor: not-allowed;
    }

    &.active {
      cursor: not-allowed;
      background-color: #C81623;
      color: #fff;
    }
  }
  span{
    display: inline-block;
    line-height: 28px;
    font-size: 14px;
    color:gray;
    vertical-align: middle;
  }
}
</style>